<template>
  <div class="container">
    <a-card class="general-card">
      <a-page-header title="居民享受补贴详情" @back="goBack"> </a-page-header>
      <a-divider style="margin-top: 0" />
      <a-descriptions :data="personData" title="申报人基础信息" bordered  :column="4"/>
      <a-descriptions :data="applyData" title="申报信息" bordered />
      <a-divider style="margin-top: 0" />
      <a-table
        row-key="id"
        :loading="loading"
        :data="renderData"
        :bordered="false"
        :pagination="false"
      >
        <template #columns>
          <a-table-column title="序号" :width="60">
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column title="申报周期" data-index="cycleName" />
          <a-table-column title="保险类型" data-index="rptTypeName" />
          <a-table-column title="金额" data-index="fee" />
          <a-table-column title="开始日期" data-index="feestart" />
          <a-table-column title="结束日期" data-index="feeend" />
          <a-table-column title="备注" data-index="remark" />
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import {
    applyApplyDetails,
    ApplyDetailVO,
    ApplyVO,
    PersonInfoVO,
  } from '@/api/subsidy';
  import { DescData } from '@arco-design/web-vue';

  const { loading, setLoading } = useLoading();
  const renderData = ref<ApplyDetailVO[]>([]); // ref<PersonVo[]>([]);
  const emit = defineEmits(['go']);
  const person = ref<PersonInfoVO>();
  const apply = ref<ApplyVO>();
  const personData = ref<DescData[]>([]);
  const applyData = ref<DescData[]>([]);
  const fetchData = async (
    applyId: string // = { current: 1, pageSize: 20 }
  ) => {
    setLoading(true);
    try {
      const { data } = await applyApplyDetails(applyId);
      renderData.value = data;
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };
  const handleChangeVisible = (obj1: PersonInfoVO, obj2: ApplyVO) => {
    person.value = obj1;
    apply.value = obj2;
    if (person.value) {
      personData.value = [
        { label: '申报人姓名', value: person.value?.name },
        { label: '身份证号码', value: person.value?.cardId },
        { label: '性别', value: person.value?.gender },
        { label: '联系电话', value: person.value?.phone },
        { label: '人员类型', value: person.value?.personBizTypeName },
        { label: '初次有效申报日期', value: person.value?.applyDate },
        {
          label: '理论可享受月数',
          value: person.value?.canApplyMonths as unknown as string,
        },
        {
          label: '已享受月数',
          value: person.value?.applyedMonths as unknown as string,
        },
      ];
    }
    if (apply.value) {
      applyData.value = [
        { label: '旗区', value: apply.value?.areaName },
        { label: '银行', value: apply.value?.bankName },
        { label: '银行卡号', value: apply.value?.psnBankCode },
        { label: '数据状态', value: apply.value?.deleteFlag === '1' ? '无效' : '有效' },
      ];
    }
    fetchData(obj2.id);
  };

  const goBack = () => {
    emit('go', '2');
  };
  defineExpose({ handleChangeVisible });
</script>

<style scoped lang="less">
  .container {
    padding: 10px;
  }

  :deep(.arco-table-th) {
    &:last-child {
      .arco-table-th-item-title {
        margin-left: 16px;
      }
    }
  }
</style>
